---
title: AstroサイトをNetlifyにデプロイする
description: NetlifyでAstroサイトをウェブにデプロイする方法。
type: deploy
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro'

[Netlify](https://netlify.com)は、ウェブアプリケーションや静的ウェブサイトのためのホスティングとサーバーレスバックエンドサービスを提供しています。Astroサイトは全てNetlifyでホストできます！

このガイドは、NetlifyのウェブサイトUIまたはNetlifyのCLIを介してデプロイするための手順を説明しています。

## プロジェクトの設定

Astroプロジェクトは、静的サイト、サーバーレンダリングサイト、エッジレンダリングサイトの3つの異なる方法でNetlifyにデプロイできます。

### 静的サイト

Astroプロジェクトは、デフォルトでは静的サイトです。Netlifyに静的Astroサイトをデプロイするために、特に追加の設定は必要ありません。

### SSR用のアダプターを追加する

AstroプロジェクトでSSRを有効にし、NetlifyのEdge Functionsを使用してNetlifyにデプロイするには:

以下の`astro add`コマンドで[Netlifyアダプター](/ja/guides/integrations-guide/netlify/)を追加し、AstroプロジェクトでSSRを有効にします。これによりアダプターがインストールされ、`astro.config.mjs`ファイルに適切な変更が1ステップで行われます。

```bash
npx astro add netlify
```

アダプターを手動でインストールする場合は、以下の2つのステップを実行してください。

1. [`@astrojs/netlify`アダプター](/ja/guides/integrations-guide/netlify/)を、パッケージマネージャーを使ってプロジェクトの依存関係にインストールします。npmをパッケージマネージャーとして使用しているかどうかわからない場合は、ターミナルで以下のコマンドを実行します。

    ```bash
    npm install @astrojs/netlify
    ```

1. `astro.config.mjs`プロジェクト設定ファイルに新しく以下の2行を追加します。

    ```js title="astro.config.mjs" ins={2, 5-6}
    import { defineConfig } from 'astro/config';
    import netlify from '@astrojs/netlify';

    export default defineConfig({
      output: 'server',
      adapter: netlify(),
    });
    ```

    Netlifyアダプターの設定に`edgeMiddleware: true`を追加することで、NetlifyのEdge Functionsを使用してプロジェクトをデプロイすることもできます。

      ```diff lang="js"
      // astro.config.mjs
      import { defineConfig } from 'astro/config';
      import netlify from '@astrojs/netlify/functions';

      export default defineConfig({
        output: 'server',
        adapter: netlify({
    +     edgeMiddleware: true
        }),
      });
      ```

## デプロイ方法

NetlifyのウェブサイトUI、もしくはNetlifyのCLI(コマンドラインインターフェース)を使うことでデプロイできます。デプロイする方法は、静的サイトもSSRサイトも同じです。

### ウェブサイトUIを使ったデプロイ方法

GitHub、GitLab、BitBucket、またはAzure DevOpsにプロジェクトがある場合は、NetlifyのウェブサイトUIを使用してAstroサイトをデプロイできます。

1. [Netlifyダッシュボード](https://app.netlify.com/)で<kbd>Add a new site</kbd>をクリックします。

2. <kbd>Import an existing project</kbd>を選択します。

    GitプロバイダーからAstroリポジトリをインポートする場合、Netlifyが自動で正しい構成設定を事前に入力します。

3. 以下の設定が入力されていることを確認し、<kbd>Deploy</kbd>ボタンをクリックします。

    - **Build Command:** `astro build`もしくは`npm run build`
    - **Publish directory:** `dist`

 デプロイが完了すると、サイトの概要ページにリダイレクトされます。そこでサイトの設定を編集できます。

ソースリポジトリ内の変更があった際には、デプロイ設定に基づいてプレビューと本番環境のデプロイをトリガーします。

#### `netlify.toml`ファイル

オプションとして、プロジェクトリポジトリのトップレベルに新しく`netlify.toml`ファイルを作成し、ビルドコマンドと公開ディレクトリ、環境変数やリダイレクトなどのプロジェクトの設定ができます。Netlifyはこのファイルを読み込み、デプロイを自動で設定します。

デフォルトの設定を構成するには、以下の`netlify.toml`ファイルを作成します。

```toml
[build]
  command = "npm run build"
  publish = "dist"
```

<ReadMore>さらに詳しい情報は、Netlifyのブログの["既存のAstroのGitリポジトリをデプロイ"](https://www.netlify.com/blog/how-to-deploy-astro/#deploy-an-existing-git-repository-to-netlify)を参照してください。</ReadMore>


### CLIを使ったデプロイ方法

[Netlify CLI](https://cli.netlify.com/)を使って新しくNetlifyサイトを作成し、Gitリポジトリをリンクすることもできます。


1. グローバルにNetlifyのCLIをインストールします。

    ```bash
    npm install --global netlify-cli
    ```

2. `netlify login`を実行し、Netlifyにログインして認証します。
3. `netlify init`を実行し、手順に沿って進めます。
4. ビルドコマンド(`astro build`)を確認します。

    CLIはビルドコマンド(`astro build`)とデプロイディレクトリ(`dist`)を自動で検出し、それらの設定を含んだ[`netlify.toml`ファイル](#netlifytomlファイル)を自動で生成することを選択するかどうか聞きます。

5.  Gitにプッシュしてビルドとデプロイを行います。

    CLIはリポジトリにデプロイキーを追加します。そのため、`git push`するたびにNetlifyでサイトが自動で再ビルドされます。

<ReadMore>さらに詳しい情報は、Netlifyのブログの[Netlify CLIを使ったAstroサイトのデプロイ](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)を参照してください。</ReadMore>

### Node.jsバージョンの設定

Netlifyのレガシー機能[build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial)を使用している場合は、Node.jsの正しいバージョンが設定されていることを確認してください。AstroはNode.js`v18.14.1`以上のバージョンが必要です。

以下の方法で[Node.jsのバージョンをNetlify上で指定](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript)できます。
- ベースディレクトリ上にある[`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc)ファイル
- Netlifyプロジェクトダッシュボード上にある、サイト設定`NODE_VERSION`環境変数

## Netlify Functionsを使用する方法

Netlify FunctionsとAstroを併用して使う場合、特別な設定は必要ありません。プロジェクトルートに`netlify/functions`ディレクトリを追加し、[Netlify Functionsのドキュメント](https://docs.netlify.com/functions/overview/)に従って進めてください！

## 例

- [Astroサイトのデプロイ方法](https://www.netlify.com/blog/how-to-deploy-astro/) — Netlifyブログ
- [フォーム、サーバーレスファンクション、リダイレクトを利用したAstroサイトのデプロイ](https://www.netlify.com/blog/deploy-an-astro-site-with-forms-serverless-functions-and-redirects/) — Netlifyブログ
- [開発の実演動画](https://youtu.be/GrSLYq6ZTes) — Netlify YouTubeチャンネル
